<template>
	<body>


		<view id="app">
			<view class="contents" :style="'min-height:' + screenHeight + 'px;'">
				<view class="none" v-if="show">
					<view class="coent">
						<u-empty text="暂无科室详情信息" mode="list" icon-size="150">
							<view slot="description" style="margin-top: 20px;">
								<p>当前科室详情信息尚未录入</p>
								<u-button type="primary" size="medium" style="margin-top: 20px;">返回上一页</u-button>
							</view>
						</u-empty>
					</view>
				</view>

				<view class="conentaa" v-if="!show">
					<view class="listxq">
						<!-- 科室图片展示区 -->
						<view class="dept-header">
							<img :src="datalist.HeadImg || 'http://xncdwx.xztongyong.cn/res/banner/2025-04-09/133886346227933045.png'" 
							                             class="dept-image" :alt="datalist.DptName">
							<view class="dept-overlay">
								<h2>{{datalist.DptName}}</h2>
								<p>专业医疗团队</p>
							</view>
						</view>

						<view class="listb">
							<span>{{datalist.CompanyName}}</span>
						</view>

						<view class="dept-content">
							<view class="dept-title">
								<!-- <view class="dept-icon">
									<i class="fa-stethoscope"></i>
								</view> -->
								<span>科室介绍</span>
							</view>

							<view class="description">
								<span>{{datalist.Introduction}}
								</span>
							</view>

							<!-- <view class="features">
								<view class="feature-card">
									<view class="feature-icon">
										<i class="fas fa-user-md"></i>
									</view>
									<view class="feature-text">
										<h3>专家团队</h3>
										<p>由多名主任医师和副主任医师组成，均具有丰富的临床经验</p>
									</view>
								</view>

								<view class="feature-card">
									<view class="feature-icon">
										<i class="fas fa-procedures"></i>
									</view>
									<view class="feature-text">
										<h3>先进设备</h3>
										<p>配备国际先进的诊疗设备，确保诊断精准、治疗高效</p>
									</view>
								</view>

								<view class="feature-card">
									<view class="feature-icon">
										<i class="fas fa-hand-holding-heart"></i>
									</view>
									<view class="feature-text">
										<h3>贴心服务</h3>
										<p>提供全程导诊、预约服务，减少等待时间，提升就医体验</p>
									</view>
								</view>
							</view>

							<view class="section-title">
								<i class="fas fa-list"></i>
								<h3>主要诊疗范围</h3>
							</view>

							<view class="service-list">
								<view class="service-item" v-for="(item, index) in services" :key="index">
									<i class="fas fa-check-circle"></i>
									<span>{{item}}</span>
								</view>
							</view>

							<view class="section-title">
								<i class="fas fa-image"></i>
								<h3>科室环境</h3>
							</view>

							<view class="gallery">
								<view class="gallery-item" v-for="i in 4" :key="'img'+i">
									<img :src="'https://source.unsplash.com/random/300x200?clinic,'+i" alt="科室环境">
								</view>
							</view>
						</view>

						<view class="contact-card">
							<view class="contact-item">
								<view class="contact-icon">
									<i class="fas fa-phone-alt"></i>
								</view>
								<view class="contact-details">
									<h4>联系电话</h4>
									<p>028-8765 4321</p>
								</view>
							</view>

							<view class="contact-item">
								<view class="contact-icon">
									<i class="fas fa-map-marker-alt"></i>
								</view>
								<view class="contact-details">
									<h4>科室位置</h4>
									<p>门诊大楼3层东区</p>
								</view>
							</view>

							<view class="contact-item">
								<view class="contact-icon">
									<i class="fas fa-clock"></i>
								</view>
								<view class="contact-details">
									<h4>接诊时间</h4>
									<p>周一至周五 8:00-17:00</p>
								</view>
							</view> -->
						</view>
					</view>
				</view>

				
			</view>
		</view>
	</body>
</template>

<script>
	export default {
		data() {
			return {
				show:true,
				DepartmentId:'',
				jianyival:'',
				screenHeight: getApp().globalData.screenHeight-44,
				datalist: '',
				}
		},
		onLoad:function(option){
			this.DepartmentId=option.id
			this.lista()
		},
		methods: {
			lista() {
				
				this.$request("DutyRecord","Detail",
				{DepartmentId:this.DepartmentId}
				).then(res => {
					console.log("科室详情", res)
					if (res.code == 1) {
						this.datalist = res.data
						this.show=false
					} else {
						this.show=true
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				}).catch(err => {
					this.show=true
					console.log("err", err)
					uni.showToast({
						title: err,
						icon: 'none',
						duration: 1000
					});
				});
			}
		}
	}
</script>

<style>
        page{
           margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
        }
        
       
        body {
            background-color: #f5f9ff;
            color: #333333;
            background-image: linear-gradient(135deg, #f5f9ff 0%, #e6f2ff 100%);
            min-height: 100vh;
        }
        
        .contents {
            min-height: 100vh;
            padding: 20px;
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .none {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 80vh;
            width: 100%;
        }
        
        .coent {
            text-align: center;
            max-width: 500px;
            padding: 40px;
            background: #ffffff;
            border-radius:16px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        }
        
        .conentaa {
            width: 100%;
            margin: 20px 0;
            animation: fadeIn 0.6s ease-out;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .listxq {
            background: #ffffff;
            border-radius:16px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            overflow: hidden;
            transition:all 0.3s ease;
            position: relative;
        }
        
        .listxq:hover {
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
        }
        
        .dept-header {
            position: relative;
            height: 240px;
            overflow: hidden;
            border-radius: 16px 16px 0 0;
        }
        
        .dept-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
        
        .dept-header:hover .dept-image {
            transform: scale(1.03);
        }
        
        .dept-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 25px 30px;
            background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
            color: white;
        }
        
        .dept-overlay h2 {
            font-size: 28px;
            margin-bottom: 8px;
            text-shadow: 0 2px 4px rgba(0,0,0,0.5);
            letter-spacing: 1px;
        }
        
        .dept-overlay p {
            font-size: 16px;
            opacity: 0.9;
        }
        
        .listb {
            padding: 20px 30px;
            text-align: center;
            background: linear-gradient(135deg, #1a73e8,#5c9df5);
            color: white;
        }
        
        .listb span {
            font-size: 26px;
            font-weight: 600;
            letter-spacing: 1px;
        }
        
        .dept-content {
            padding: 30px;
        }
        
        .dept-title {
            display: flex;
            align-items: center;
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eaeff5;
        }
        
        .dept-title span {
            font-size: 24px;
            font-weight: bold;
            color: #1a73e8;
            padding-left: 15px;
        }
        
        .dept-icon {
            background: linear-gradient(135deg, #1a73e8, #5c9df5);
            width: 46px;
            height: 46px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 20px;
        }
        
        .description {
            line-height: 1.8;
            color: #666666;
            font-size: 17px;
            margin-bottom: 30px;
        }
        
        .description p {
            margin-bottom: 15px;
            text-align: justify;
        }
        
        .features {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 20px;
            margin: 30px 0;
        }
        
        .feature-card {
            background: rgba(26, 115, 232, 0.03);
            border-radius: 12px;
            padding: 20px;
            border: 1px solid #eaeff5;
            transition: all 0.3s ease;
            display: flex;
            align-items: flex-start;
        }
        
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 6px 16px rgba(26, 115, 232, 0.1);
            border-color:#5c9df5;
        }
        
        .feature-icon {
            width: 50px;
            height: 50px;
            border-radius: 12px;
            background: rgba(26, 115, 232, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            color: #1a73e8;
            font-size: 22px;
            flex-shrink: 0;
        }
        
        .feature-text h3 {
            font-size: 18px;
            color:#333333;
            margin-bottom: 8px;
        }
        
        .feature-text p {
            font-size: 14px;
            color: #666666;
            line-height: 1.6;
        }
        
        .section-title {
            display: flex;
            align-items: center;
            margin: 35px 0 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid #5c9df5;
        }
        
        .section-title i {
            background: #5c9df5;
            width: 36px;
            height: 36px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            margin-right: 12px;
        }
        
        .section-title h3 {
            font-size: 22px;
            color: #1a73e8;
        }
        
        .service-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 15px;
        }
        
        .service-item {
            display: flex;
            align-items: center;
            padding: 12px 15px;
            background: rgba(0, 201, 204, 0.05);
            border-radius: 10px;
            border-left: 4px solid #00c9cc;
        }
        
        .service-item i {
            color:  #00c9cc;
            margin-right: 10px;
            font-size: 18px;
        }
        
        .gallery {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 15px;
            margin-top: 20px;
        }
        
        .gallery-item {
            border-radius: 12px;
            overflow: hidden;
            height: 140px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
            position: relative;
        }
        
        .gallery-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 16px rgba(0,0,0,0.15);
        }
        
        .gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .contact-card {
            background: #ffffff;
            border-radius: 16px;
            box-shadow:0 4px 20px rgba(0, 0, 0, 0.08);
            padding: 25px;
            margin-top: 30px;
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            border-top: 3px solid  #00c9cc;
        }
        
        .contact-item {
            display: flex;
            align-items: center;
            min-width: 250px;
            flex: 1;
        }
        
        .contact-icon {
            width: 50px;
            height: 50px;
            border-radius: 14px;
            background: rgba(0, 201, 204, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            color:  #00c9cc;
            font-size: 22px;
        }
        
        .contact-details h4 {
            font-size: 16px;
            color: #666666;
            margin-bottom: 5px;
        }
        
        .contact-details p {
            font-size: 18px;
            font-weight: 600;
            color: #333333;
        }
        
        .fixed-image {
            position: fixed;
            left: 50%;
            transform: translateX(-50%);
            bottom: 30px;
            width: 280px;
            z-index: 5;
            opacity: 0.9;
            filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.1));
            animation: float 6s ease-in-out infinite;
        }
        
        @keyframes float {
            0% { transform: translate(-50%, 0px); }
            50% { transform: translate(-50%, -10px); }
            100% { transform: translate(-50%, 0px); }
        }
        
        @media (max-width: 768px) {
            .contents {
                padding: 15px;
            }
            
            .dept-header {
                height: 200px;
            }
            
            .listb span {
                font-size: 22px;
            }
            
            .dept-title span {
                font-size: 20px;
            }
            
            .dept-content {
                padding: 20px;
            }
            
            .features {
                grid-template-columns: 1fr;
            }
            
            .fixed-image {
                width: 200px;
            }
            
            .service-list {
                grid-template-columns: 1fr;
            }
        }
        
        .loading {
            display: flex;
            justify-content: center;
            padding: 50px;
        }
        
        .loading-spinner {
            width: 50px;
            height: 50px;
            border: 5px solid rgba(26, 115, 232, 0.2);
            border-top: 5px solid #1a73e8;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        .back-btn {
            position: absolute;
            top: 20px;
            left: 20px;
            z-index: 100;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.9);
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            color: #1a73e8;
            font-size: 18px;
        }
    </style>